<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #game {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(20, 30px);
            gap: 1px;
            background-color: #333;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #fff;
        }
        .I { background-color: #00f0f0; }
        .J { background-color: #0000f0; }
        .L { background-color: #f0a000; }
        .O { background-color: #f0f000; }
        .S { background-color: #00f000; }
        .T { background-color: #a000f0; }
        .Z { background-color: #f00000; }
        #message, #score {
            margin-top: 20px;
            font-size: 24px;
        }
        #message {
            color: red;
        }
        #controls {
            margin-top: 10px;
        }
        button {
            padding: 10px;
            font-size: 16px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <div id="message"></div>
    <div id="score"></div>
    <div id="controls">
        <button onclick="startGame()">开始游戏</button>
        <button onclick="pauseGame()">暂停游戏</button>
        <button onclick="restartGame()">重新开始</button>
    </div>
    <script>
        const game = document.getElementById('game');
        const message = document.getElementById('message');
        const scoreDisplay = document.getElementById('score');
        const rows = 20;
        const cols = 10;
        let board, gameInterval, isPaused, dropInterval, score, level, currentTetromino;
 
        const tetrominoes = {
            I: [[1, 1, 1, 1]],
            J: [[1, 0, 0], [1, 1, 1]],
            L: [[0, 0, 1], [1, 1, 1]],
            O: [[1, 1], [1, 1]],
            S: [[0, 1, 1], [1, 1, 0]],
            T: [[0, 1, 0], [1, 1, 1]],
            Z: [[1, 1, 0], [0, 1, 1]]
        };
 
        function initGame() {
            board = Array.from({ length: rows }, () => Array(cols).fill(''));
            currentTetromino = {
                type: Object.keys(tetrominoes)[Math.floor(Math.random() * 7)],
                position: { x: 3, y: 0 },
                shape: tetrominoes[Object.keys(tetrominoes)[Math.floor(Math.random() * 7)]]
            };
            message.textContent = '';
            score = 0;
            level = 1;
            dropInterval = 1000;
            updateScore();
            drawBoard();
        }
 
        function drawBoard() {
            game.innerHTML = '';
            board.forEach(row => {
                row.forEach(cell => {
                    const div = document.createElement('div');
                    div.className = `cell ${cell}`;
                    game.appendChild(div);
                });
            });
        }
 
        function drawTetromino(type, position, shape) {
            shape.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if (cell) {
                        board[position.y + i][position.x + j] = type;
                    }
                });
            });
        }
 
        function clearTetromino(type, position, shape) {
            shape.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if (cell) {
                        board[position.y + i][position.x + j] = '';
                    }
                });
            });
        }
 
        function canMove(position, shape) {
            return shape.every((row, i) =>
                row.every((cell, j) =>
                    !cell || (board[position.y + i] && board[position.y + i][position.x + j] === '')
                )
            );
        }
 
        function rotate(shape) {
            return shape[0].map((_, index) => shape.map(row => row[index]).reverse());
        }
 
        function clearFullRows() {
            let linesCleared = 0;
            board = board.reduce((acc, row) => {
                if (row.every(cell => cell !== '')) {
                    acc.unshift(Array(cols).fill(''));
                    linesCleared++;
                } else {
                    acc.push(row);
                }
                return acc;
            }, []);
            if (linesCleared > 0) {
                score += linesCleared * 100;
                if (score >= level * 1000) {
                    level++;
                    dropInterval = Math.max(100, dropInterval - 100);
                    clearInterval(gameInterval);
                    startGame();
                }
                updateScore();
            }
        }
 
        function updateScore() {
            scoreDisplay.textContent = `得分: ${score} 级别: ${level}`;
        }
 
        function drop() {
            if (isPaused) return;
            clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            currentTetromino.position.y++;
            if (!canMove(currentTetromino.position, currentTetromino.shape)) {
                currentTetromino.position.y--;
                drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
                if (currentTetromino.position.y === 0) {
                    message.textContent = '你失败啦';
                    setTimeout(restartGame, 2000);
                    clearInterval(gameInterval);
                } else {
                    clearFullRows();
                    currentTetromino = {
                        type: Object.keys(tetrominoes)[Math.floor(Math.random() * 7)],
                        position: { x: 3, y: 0 },
                        shape: tetrominoes[Object.keys(tetrominoes)[Math.floor(Math.random() * 7)]]
                    };
                }
            }
            drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            drawBoard();
        }
 
        function rotateTetromino() {
            if (isPaused) return;
            clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            const rotatedShape = rotate(currentTetromino.shape);
            if (canMove(currentTetromino.position, rotatedShape)) {
                currentTetromino.shape = rotatedShape;
            }
            drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            drawBoard();
        }
 
        function moveLeft() {
            if (isPaused) return;
            clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            currentTetromino.position.x--;
            if (!canMove(currentTetromino.position, currentTetromino.shape)) {
                currentTetromino.position.x++;
            }
            drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            drawBoard();
        }
 
        function moveRight() {
            if (isPaused) return;
            clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            currentTetromino.position.x++;
            if (!canMove(currentTetromino.position, currentTetromino.shape)) {
                currentTetromino.position.x--;
            }
            drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);
            drawBoard();
        }
 
        function startGame() {
            isPaused = false;
            clearInterval(gameInterval);
            gameInterval = setInterval(drop, dropInterval);
        }
 
        function pauseGame() {
            isPaused = true;
            clearInterval(gameInterval);
        }
 
        function restartGame() {
            initGame();
            clearInterval(gameInterval);
        }
 
    document.addEventListener('keydown', (e) => {
    // 检查是否是方向键，并阻止默认行为
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
        e.preventDefault(); // 阻止默认行为
    }

    if (e.key === 'ArrowUp') {
        rotateTetromino();
    } else if (e.key === 'ArrowLeft') {
        moveLeft();
    } else if (e.key === 'ArrowRight') {
        moveRight();
    } else if (e.key === 'ArrowDown') {
        drop();
    }
    });
 
        initGame();
    </script>
</body>
</html>